<template>
  <div
    class="custom-banner"
    :style="{
      height: px2rpx2px(props.height),
      backgroundImage: `url(${props.bgUrl})`,
    }"
  >
    <template v-if="isWx">
      <!-- #ifdef MP-WEIXIN -->
      <div
        class="Swiper"
        :style="{
          width: px2rpx2px(props.bannerW),
          height: px2rpx2px(props.bannerH),
          padding: `${px2rpx2px(props.paddingTop)} ${px2rpx2px(
            props.paddingLR
          )} ${px2rpx2px(props.paddingBottom)} ${px2rpx2px(props.paddingLR)}`,
        }"
      >
        <swiper
          :style="{
            width: px2rpx2px(props.bannerW),
            height: px2rpx2px(props.bannerH),
          }"
          :indicator-dots="true"
          :autoplay="true"
          :interval="props.interval"
          @animationfinish="currentVideo = $event.detail.current"
          @change="handleChangeVideo"
        >
          <swiper-item
            v-for="(item, index) in props.bannerList"
            :key="item.url"
          >
            <video
              v-if="props.type === 'Video'"
              :style="{
                borderRadius: px2rpx2px(props.borderRadius),
                width: px2rpx2px(props.bannerW),
                height: px2rpx2px(props.bannerH),
              }"
              autoplay="true"
              object-fit="cover"
              :show-mute-btn="true"
              :show-fullscreen-btn="false"
              muted="true"
              :src="item.url"
              @play="onVideoPlay(item)"
              @timeupdate="onVideoTimeUpdate($event, item, index)"
            ></video>

            <image
              v-else
              :src="item.url"
              @click="onLink(item.link)"
              :style="{
                borderRadius: px2rpx2px(props.borderRadius),
                width: px2rpx2px(props.bannerW),
                height: px2rpx2px(props.bannerH),
              }"
            />
          </swiper-item>
        </swiper>

        <template v-if="props.hasHotZone">
          <div
            class="hot-zone"
            v-for="(item, index) in props.hotZone"
            :key="index"
            :style="{
              width: px2rpx2px(item.width),
              height: px2rpx2px(item.height),
              top: px2rpx2px(item.top),
              left: px2rpx2px(item.left),
            }"
            @click.stop="onHotZoneClick(item)"
          ></div>
        </template>
      </div>
      <!-- #endif -->
    </template>

    <template v-else>
      <!-- #ifdef H5 -->
      <div
        class="Swiper"
        :style="{
          width: px2rpx2px(props.bannerW),
          height: px2rpx2px(props.bannerH),
          padding: `${px2rpx2px(props.paddingTop)} ${px2rpx2px(
            props.paddingLR
          )} ${px2rpx2px(props.paddingBottom)} ${px2rpx2px(props.paddingLR)}`,
        }"
      >
        <el-carousel
          :interval="props.interval"
          :style="{
            width: px2rpx2px(props.bannerW),
            height: px2rpx2px(props.bannerH),
          }"
          arrow="always"
          v-if="props.type === 'Video'"
        >
          <el-carousel-item
            v-for="(item, index) in props.bannerList"
            :key="index"
          >
            <video
              :style="{
                borderRadius: px2rpx2px(props.borderRadius),
                width: px2rpx2px(props.bannerW),
                height: px2rpx2px(props.bannerH),
              }"
              style="object-fit: cover"
              autoplay="true"
              muted="true"
              :show-mute-btn="true"
              :show-fullscreen-btn="false"
              :src="item.url"
              v-if="item.url !== ''"
            />

            <div v-else class="image-null">
              <VideoCamera class="null-icon" />
            </div>
          </el-carousel-item>
        </el-carousel>

        <el-carousel
          v-else
          :interval="props.interval"
          :style="{
            width: px2rpx2px(props.bannerW),
            height: px2rpx2px(props.bannerH),
          }"
          arrow="always"
        >
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <img
              :src="item.url"
              v-if="item.url !== ''"
              :style="{
                borderRadius: px2rpx2px(props.borderRadius),
                width: px2rpx2px(props.bannerW),
                height: px2rpx2px(props.bannerH),
              }"
            />

            <div v-else class="image-null"><Picture class="null-icon" /></div>
          </el-carousel-item>
        </el-carousel>

        <template v-if="props.hasHotZone">
          <div
            class="hot-zone"
            v-for="(item, index) in props.hotZone"
            :key="index"
            :style="{
              width: px2rpx2px(item.width),
              height: px2rpx2px(item.height),
              top: px2rpx2px(item.top),
              left: px2rpx2px(item.left),
            }"
            @click.stop="onHotZoneClick(item)"
          ></div>
        </template>
      </div>
      <!-- #endif -->
    </template>
    <slot></slot>

    <div
      class="Decorate"
      v-if="props.hasDecorate"
      :style="{
        width: px2rpx2px(props.DecorateImgWidth),
        height: px2rpx2px(props.DecorateImgHeight),
        backgroundImage: `url(${props.DecorateImgUrl})`,
        top: px2rpx2px(props.DecorateTop),
        left: px2rpx2px(props.DecorateLeft),
      }"
    ></div>
  </div>
</template>

<script>
const propConfig = {
  name: {
    type: String,
    default: "CustomBanner",
  },
  type: {
    label: "Banner类型",
    type: String,
    default: "Video",
  },
  bgUrl: {
    label: "背景图片",
    type: String,
    default: "",
    editType: "el-input",
  },
  height: {
    label: "banner区域高度",
    type: String,
    default: "400px",
    editType: "el-input",
  },
  bannerW: {
    label: "banner内容宽度",
    type: String,
    default: "375px",
    editType: "el-input",
  },
  bannerH: {
    label: "banner内容高度",
    type: String,
    default: "400px",
    editType: "el-input",
  },

  paddingTop: {
    label: "banner上边距",
    type: String,
    default: "0px",
    editType: "el-input",
  },

  paddingBottom: {
    label: "banner下边距",
    type: String,
    default: "0px",
    editType: "el-input",
  },

  paddingLR: {
    label: "banner左右边距",
    type: String,
    default: "0px",
    editType: "el-input",
  },

  borderRadius: {
    label: "banner圆角",
    type: String,
    default: "0px",
    editType: "el-input",
  },
  hasHotZone: {
    label: "是否开启图片热区",
    type: Boolean,
    default: false,
  },
  hotZone: {
    label: "热区设置",
    editType: "hotZone",
    type: Array,
    default: [],
  },

  interval: {
    label: "切换间隔",
    type: Number,
    default: 5000,
    editType: "el-input-number",
  },

  bannerList: {
    label: "资源组",
    editType: "listData",
    type: Array,
    default: [],
  },

  hasDecorate: {
    label: "是否开启banner装饰",
    type: Boolean,
    default: false,
    editType: "el-switch",
  },
  DecorateImgUrl: {
    label: "banner装饰图片地址",
    type: String,
    default: "",
    editType: "el-input",
  },
  DecorateImgWidth: {
    label: "banner装饰图片宽度",
    type: String,
    default: "0px",
    editType: "el-input",
  },
  DecorateImgHeight: {
    label: "banner装饰图片高度",
    type: String,
    default: "0px",
    editType: "el-input",
  },
  DecorateTop: {
    label: "装饰图片上边距",
    type: String,
    default: "0px",
    editType: "el-input",
  },
  DecorateLeft: {
    label: "装饰图片左边距",
    type: String,
    default: "0px",
    editType: "el-input",
  },
};
const bannerList = ref([]);
</script>

<script setup>
import { defineProps, defineEmits, ref, onMounted } from "vue";
import { px2rpx2px } from "../utils/index";

// #ifdef H5
import { Picture, VideoCamera } from "@element-plus/icons-vue";
// #endif

const props = defineProps(propConfig);
const emits = defineEmits(["onHotZoneClick", "onLink", 'videoPlay', 'videoChange']);
const currentVideo = ref(0);

const isWx = ref(false);

onMounted(() => {
  bannerList.value = props.bannerList.sort((a, b) => a.sort - b.sort);
  // #ifdef MP-WEIXIN
  if (window !== undefined) return;
  if (uni?.getSystemInfoSync().uniPlatform === "mp-weixin") {
    isWx.value = true;
  }
  // #endif
});

const onHotZoneClick = (item) => {
  const { url, isCoupon } = item
  const _bannerList = props.bannerList.sort((a, b) => a.sort - b.sort)
  // to do
  emits("onHotZoneClick", {
    url,
    isCoupon,
    currentVideo: currentVideo.value,
    vid: _bannerList[currentVideo.value]?.url?.split('/').at(-1)
  });
};

const processValues = {}
const onVideoPlay = ({ url }) => {
  const vid = url?.split('/').at(-1)
  emits('videoPlay', { vid, process: processValues[vid] })
}
const onVideoTimeUpdate = ({ detail }, { url }, index) => {
  const vid = url?.split('/').at(-1)
  processValues[vid] = detail.currentTime.toFixed(2)
}

const handleChangeVideo = ({ detail }) => {
  const item = bannerList.value[currentVideo.value]
  const _lastPrefix = item.url.split('.').at(-1)
  const vid = item.url?.split('/').at(-1)
  if (['png', 'jpg', 'jpeg', 'webp'].includes(_lastPrefix)) {
    emits('imageChange', { vid })
    return
  }
  currentVideoId.value = vid
  emits('videoChange', { vid })
}

const onLink = (link) => {
  console.log(link)
  const { url } = bannerList.value[currentVideo.value]
  const vid = url?.split('/').at(-1)
  emits("onLink", { link, vid });
};
</script>

<style lang="scss" scoped>
.custom-banner {
  position: relative;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  .Decorate {
    position: absolute;
    z-index: 100;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .Swiper {
    position: relative;

    :deep(canvas) {
      width: inherit;
      height: inherit;
    }
    .hot-zone {
      position: absolute;
      z-index: 100;
    }

    .image-null {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .null-icon {
        width: 50px;
        height: 50px;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}

:deep(.el-carousel__container) {
  height: 100%;
}
</style>
